
// --------------------------------------------------------------
// ----------------------常用基本全局样式文------------------------
// --------------------------------------------------------------

// ======================= 元素重置全局样式 =======================

*, *:before, *:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
  
body {
  font-family: "微软雅黑";
}

a, a:visited, a:focus, a:hover, a:link, a:active {
  color: inherit;
  outline: none;
  text-decoration: none;
}

button, input {
  border: none;
  background-color: transparent;
  outline: none;
  border-radius: 0;
  font-size: inherit;
}

a, button {
  cursor: pointer;
}

ul, li, ol {
  list-style: none;
}

// FIXME: html2canvas 生成图片时，会因为设置全局 img 样式而导致文字变形、偏移，所以不及建议修改全局 img 样式
// img {
//   width: 100%;
//   // height: 100%; // 自动适配高度
//   border: none;
//   display: inline-block;
//   object-fit: cover;
// }

div:focus {
  outline: none;
}

// ======================= flex全局样式 =======================

/* flex布局 */
.flex { display: flex; flex-wrap: nowrap; }
.fwrap { display: flex; flex-wrap: wrap; }
.f1 { flex: 1; }
.f2 { flex: 2; }
.f3 { flex: 3; }
/* 垂直方向布局 */
.fcolumn { display: flex; flex-direction: column; }
/* 垂直居中 */
.fvertical { display: flex; align-items: center; }
/* 水平居中 */
.fcenter { display: flex; justify-content: center; }
/* 水平 + 垂直居中 */
.fcc { display: flex; align-items: center; justify-content: center; }
/* 右对齐 */
.fright { display: flex; justify-content: flex-end; }
/* 两端对齐 */
.fbetween { display: flex; justify-content: space-between; }
/* 靠底部对齐 */
.fbottom { display: flex; align-items: flex-end; }
.no-shrink { flex-shrink: 0; }

/* 溢出...显示 当前节点生效 */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ellipsis_1, .ellipsis_2, .ellipsis_3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 溢出...显示 子节点生效 */
.ellipsis_1 { -webkit-line-clamp: 1; }
.ellipsis_2 { -webkit-line-clamp: 2; }
.ellipsis_3 { -webkit-line-clamp: 3; }


/* 上下左右边距 */
@for $index from 1 through 5 {
  .mgl_#{$index}0 {
    margin-left: 10px * $index;
  }
  .mgr_#{$index}0 {
    margin-right: 10px * $index;
  }
  .mgt_#{$index}0 {
    margin-top: 10px * $index;
  }
  .mgb_#{$index}0 {
    margin-bottom: 10px * $index;
  }
  .pdl_#{$index}0 {
    padding-left: 10px * $index;
  }
  .pdr_#{$index}0 {
    padding-right: 10px * $index;
  }
  .pdt_#{$index}0 {
    padding-top: 10px * $index;
  }
  .pdb_#{$index}0 {
    padding-bottom: 10px * $index;
  }
}

/**
 * 设置滚动条的宽度和颜色
 */
::-webkit-scrollbar {
  width: 7px;
}
/* 滚动条那一竖的样式 */
::-webkit-scrollbar-track {
  // background-color: #f1f1f1;
}
/* 滚动条样式 */
::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 4px;
}
/* 鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #b2b2b2;
  cursor: pointer;
}